<template>
  <div class="right-select-animate">
    <div class="title"><i class="jy-icon-arrow-left" @click.stop="onHiddenSelectAnimate($event)"></i>选择动画</div>
    <el-tabs v-model="activeName" class="margin-left-right-16 margin-top-10" type="border-card">
      <el-tab-pane label="进入" name="first">
        <ul class="edit-handles-con">
          <li v-for="(item) in animates.ins" :key="item.value" @click.stop="onPlayAnimate(item)" :class="item.active ? 'active' : ''" @mouseover="onHover(item)" @mouseout="onOut(item)">
            <div class="scale-con"><i :class="item.isHover ? item.classStrHover : item.classStr"></i></div>
            <p>{{item.name}}</p>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="强调" name="second">
        <ul class="edit-handles-con">
          <li v-for="(item) in animates.emphasizes" :key="item.value" @click.stop="onPlayAnimate(item)" :class="item.active ? 'active' : ''" @mouseover="onHover(item)" @mouseout="onOut(item)">
            <div class="scale-con"><i :class="item.isHover ? item.classStrHover : item.classStr"></i></div>
            <p>{{item.name}}</p>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="退出" name="third">
        <ul class="edit-handles-con">
          <li v-for="(item) in animates.outs" :key="item.value" @click.stop="onPlayAnimate(item)" :class="item.active ? 'active' : ''" @mouseover="onHover(item)" @mouseout="onOut(item)">
            <div class="scale-con"><i :class="item.isHover ? item.classStrHover : item.classStr"></i></div>
            <p>{{item.name}}</p>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { ANIMATE_TRIGGER_TYPE, ANIMATE_BEZIER_TYPE, GSAP_EASE_TYPES, GSAP_EASE_INOUT_TYPES } from '@/const/'
import { getAnimateData } from '@/const/web/'
import { PathAnimate } from '@/store/models/component-default-data'
import { EventBus } from '@/utils/'

declare interface IAnimateItem {
  name: string
  value: string
  active: boolean
  triggerType: string
  isHover: boolean
}

const activeName = 'first'
const animates = reactive(getAnimateData())
const useWebComponent = useWebComponentStore()
let currentItem: any //{name: "从上向下滑动", value: "slideOutDown", active: false, triggerType: 'auto'}

const onHover = (item: IAnimateItem) => {
  item.isHover = true
  if(currentItem) {
    currentItem.active = false
  }
  item.active = true
  currentItem = item
  useWebComponent.updateCurrentAnimateItem({ name: item.name, classStr: item.value, isPlaying: true })
  EventBus.$emit("playAnimate", useWebComponent.currentComponentData!.id)
}
const onOut = (item: IAnimateItem) => {
  item.isHover = false
  item.active = false
}
const onHiddenSelectAnimate = (e: any) => {
  e.stopPropagation()
  e.preventDefault()
  useWebComponent.changeSelectAnimatePlane({ isActive: false })
}
const onPlayAnimate = (item: any) => {
  useWebComponent.changeSelectAnimatePlane({ isActive: false })
  EventBus.$emit("playAnimate", useWebComponent.currentComponentData!.id)
}
</script>



<style lang="scss">
.right-select-animate{
  .title{
    background-color: #127BFF;
    padding: 10px;
  }
  color: #ffffff;
  .jy-icon-arrow-left{
    margin-right: 10px;
    display: inline-block;
  }
  .el-tab-pane ul{
    margin-top: 10px;
    margin-left: 10px;
  }
  .el-tabs__item{
    height: 30px;
    line-height: 30px;
  }
  li{
    font-size: 12px;
    color: #000000;
    display: block;
    margin: 15px 18px;
    text-align: center;
    display: inline-block;

    .scale-con{
      width: 52px;
      height: 52px;
      margin: 0 auto;
       i{
          transform-origin: 0 0;
          transform: scale(0.5);
       }
    }
  }
  li.active, li:hover{
    color: #127BFF;
  }
}
</style>
